<template>
  <div class="all-count" v-loading="loading">
    <div style="height: 100%;">
      <!--<div class="item">
        <div class="left">
          <p>
            <i class="xffont font-bisaihuodong"></i>
            <span>专场活动场次</span>
          </p>
          <p>
            <span class="num">{{activities.currentCount || 0}}</span>
            <span>场次</span>
          </p>
        </div>
        <div class="middle">
          <p>
            <span>同比增长</span>
            <img src="./tongbi.png" alt="">
          </p>
          <p>
            <span class="num">{{formatNum(activities.yearOnYearRate)}}</span>
            <span>%</span>
            <img src="./fall.png" alt="" v-if="!fallOrRise(activities.yearOnYearRate)" class="ani-down">
            <img src="./rise.png" alt="" v-if="fallOrRise(activities.yearOnYearRate)" class="ani-up">
          </p>
        </div>
        <div class="middle">
          <p>
            <span>环比增长</span>
            <img src="./huanbi.png" alt="">
          </p>
          <p>
            <span class="num">{{formatNum(activities.ringRatioRate)}}</span>
            <span>%</span>
            <img src="./fall.png" alt="" v-if="!fallOrRise(activities.ringRatioRate)" class="ani-down">
            <img src="./rise.png" alt="" v-if="fallOrRise(activities.ringRatioRate)" class="ani-up">
          </p>
        </div>
      </div>-->
      <div class="item">
        <div class="left">
          <p>
            <i class="xffont font-gongsi"></i>
            <span>用人单位数</span>
          </p>
          <p>
            <span class="num">{{corpList.currentCount || 0}}</span>
            <span>家</span>
          </p>
        </div>
        <div class="middle">
          <p>
            <span>同比增长</span>
            <img src="./tongbi.png" alt="">
          </p>
          <p>
            <span class="num">{{formatNum(corpList.yearOnYearRate)}}</span>
            <span>%</span>
            <img src="./fall.png" alt="" v-if="!fallOrRise(corpList.yearOnYearRate)" class="ani-down">
            <img src="./rise.png" alt="" v-if="fallOrRise(corpList.yearOnYearRate)" class="ani-up">
          </p>
        </div>
        <div class="middle">
          <p>
            <span>环比增长</span>
            <img src="./huanbi.png" alt="">
          </p>
          <p>
            <span class="num">{{formatNum(corpList.ringRatioRate)}}</span>
            <span>%</span>
            <img src="./fall.png" alt="" v-if="!fallOrRise(corpList.ringRatioRate)" class="ani-down">
            <img src="./rise.png" alt="" v-if="fallOrRise(corpList.ringRatioRate)" class="ani-up">
          </p>
        </div>
      </div>
      <div class="item">
        <div class="left">
          <p>
            <i class="xffont font-renshu"></i>
            <span>求职人数</span>
          </p>
          <p>
            <span class="num">{{applyList.currentCount || 0}}</span>
            <span>位</span>
          </p>
        </div>
        <div class="middle">
          <p>
            <span>同比增长</span>
            <img src="./tongbi.png" alt="">
          </p>
          <p>
            <span class="num">{{formatNum(applyList.yearOnYearRate)}}</span>
            <span>%</span>
            <img src="./fall.png" alt="" v-if="!fallOrRise(applyList.yearOnYearRate)" class="ani-down">
            <img src="./rise.png" alt="" v-if="fallOrRise(applyList.yearOnYearRate)" class="ani-up">
          </p>
        </div>
        <div class="middle">
          <p>
            <span>环比增长</span>
            <img src="./huanbi.png" alt="">
          </p>
          <p>
            <span class="num">{{formatNum(applyList.ringRatioRate)}}</span>
            <span>%</span>
            <img src="./fall.png" alt="" v-if="!fallOrRise(applyList.ringRatioRate)" class="ani-down">
            <img src="./rise.png" alt="" v-if="fallOrRise(applyList.ringRatioRate)" class="ani-up">
          </p>
        </div>
      </div>
      <div class="item">
        <div class="left">
          <p>
            <i class="xffont font-icon-project"></i>
            <span>注册简历数</span>
          </p>
          <p>
            <span class="num">{{registerBaseList.currentCount || 0}}</span>
            <span>个</span>
          </p>
        </div>
        <div class="middle">
          <p>
            <span>同比增长</span>
            <img src="./tongbi.png" alt="">
          </p>
          <p>
            <span class="num">{{formatNum(registerBaseList.yearOnYearRate)}}</span>
            <span>%</span>
            <img src="./fall.png" alt="" v-if="!fallOrRise(registerBaseList.yearOnYearRate)" class="ani-down">
            <img src="./rise.png" alt="" v-if="fallOrRise(registerBaseList.yearOnYearRate)" class="ani-up">
          </p>
        </div>
        <div class="middle">
          <p>
            <span>环比增长</span>
            <img src="./huanbi.png" alt="">
          </p>
          <p>
            <span class="num">{{formatNum(registerBaseList.ringRatioRate)}}</span>
            <span>%</span>
            <img src="./fall.png" alt="" v-if="!fallOrRise(registerBaseList.ringRatioRate)" class="ani-down">
            <img src="./rise.png" alt="" v-if="fallOrRise(registerBaseList.ringRatioRate)" class="ani-up">
          </p>
        </div>
      </div>
      <div class="item">
        <div class="left">
          <p>
            <i class="xffont font-bisaihuodong"></i>
            <span>达成意向数</span>
          </p>
          <p>
            <span class="num">{{wantList.currentCount || 0}}</span>
            <span>个</span>
          </p>
        </div>
        <div class="middle">
          <p>
            <span>同比增长</span>
            <img src="./tongbi.png" alt="">
          </p>
          <p>
            <span class="num">{{formatNum(wantList.yearOnYearRate)}}</span>
            <span>%</span>
            <img src="./fall.png" alt="" v-if="!fallOrRise(wantList.yearOnYearRate)" class="ani-down">
            <img src="./rise.png" alt="" v-if="fallOrRise(wantList.yearOnYearRate)" class="ani-up">
          </p>
        </div>
        <div class="middle">
          <p>
            <span>环比增长</span>
            <img src="./huanbi.png" alt="">
          </p>
          <p>
            <span class="num">{{formatNum(wantList.ringRatioRate)}}</span>
            <span>%</span>
            <img src="./fall.png" alt="" v-if="!fallOrRise(wantList.ringRatioRate)" class="ani-down">
            <img src="./rise.png" alt="" v-if="fallOrRise(wantList.ringRatioRate)" class="ani-up">
          </p>
        </div>
      </div>
      <div class="item">
        <div class="left">
          <p>
            <i class="xffont font-18window"></i>
            <span>用人单位项目数</span>
          </p>
          <p>
            <span class="num">{{projectList.currentCount || 0}}</span>
            <span>个</span>
          </p>
        </div>
        <div class="middle">
          <p>
            <span>同比增长</span>
            <img src="./tongbi.png" alt="">
          </p>
          <p>
            <span class="num">{{formatNum(projectList.yearOnYearRate)}}</span>
            <span>%</span>
            <img src="./fall.png" alt="" v-if="!fallOrRise(projectList.yearOnYearRate)" class="ani-down">
            <img src="./rise.png" alt="" v-if="fallOrRise(projectList.yearOnYearRate)" class="ani-up">
          </p>
        </div>
        <div class="middle">
          <p>
            <span>环比增长</span>
            <img src="./huanbi.png" alt="">
          </p>
          <p>
            <span class="num">{{formatNum(projectList.ringRatioRate)}}</span>
            <span>%</span>
            <img src="./fall.png" alt="" v-if="!fallOrRise(projectList.ringRatioRate)" class="ani-down">
            <img src="./rise.png" alt="" v-if="fallOrRise(projectList.ringRatioRate)" class="ani-up">
          </p>
        </div>
      </div>
      <div class="item">
        <div class="left">
          <p>
            <i class="xffont font-zhiwei"></i>
            <span>用人单位岗位数</span>
          </p>
          <p>
            <span class="num">{{jobList.currentCount || 0}}</span>
            <span>个</span>
          </p>
        </div>
        <div class="middle">
          <p>
            <span>同比增长</span>
            <img src="./tongbi.png" alt="">
          </p>
          <p>
            <span class="num">{{formatNum(jobList.yearOnYearRate)}}</span>
            <span>%</span>
            <img src="./fall.png" alt="" v-if="!fallOrRise(jobList.yearOnYearRate)" class="ani-down">
            <img src="./rise.png" alt="" v-if="fallOrRise(jobList.yearOnYearRate)" class="ani-up">
          </p>
        </div>
        <div class="middle">
          <p>
            <span>环比增长</span>
            <img src="./huanbi.png" alt="">
          </p>
          <p>
            <span class="num">{{formatNum(jobList.ringRatioRate)}}</span>
            <span>%</span>
            <img src="./fall.png" alt="" v-if="!fallOrRise(jobList.ringRatioRate)" class="ani-down">
            <img src="./rise.png" alt="" v-if="fallOrRise(jobList.ringRatioRate)" class="ani-up">
          </p>
        </div>
      </div>
      <div class="item">
        <div class="left">
          <p>
            <i class="xffont font-jianli-copy"></i>
            <span>用人单位收到简历数</span>
          </p>
          <p>
            <span class="num">{{resumeList.currentCount || 0}}</span>
            <span>封</span>
          </p>
        </div>
        <div class="middle">
          <p>
            <span>同比增长</span>
            <img src="./tongbi.png" alt="">
          </p>
          <p>
            <span class="num">{{formatNum(resumeList.yearOnYearRate)}}</span>
            <span>%</span>
            <img src="./fall.png" alt="" v-if="!fallOrRise(resumeList.yearOnYearRate)" class="ani-down">
            <img src="./rise.png" alt="" v-if="fallOrRise(resumeList.yearOnYearRate)" class="ani-up">
          </p>
        </div>
        <div class="middle">
          <p>
            <span>环比增长</span>
            <img src="./huanbi.png" alt="">
          </p>
          <p>
            <span class="num">{{formatNum(resumeList.ringRatioRate)}}</span>
            <span>%</span>
            <img src="./fall.png" alt="" v-if="!fallOrRise(resumeList.ringRatioRate)" class="ani-down">
            <img src="./rise.png" alt="" v-if="fallOrRise(resumeList.ringRatioRate)" class="ani-up">
          </p>
        </div>
      </div>
      <div class="item">
        <div class="left">
          <p>
            <i class="xffont font-xueshimao"></i>
            <span>用人单位人才需求数</span>
          </p>
          <p>
            <span class="num">{{demandList.currentCount || 0}}</span>
            <span>人</span>
          </p>
        </div>
        <div class="middle">
          <p>
            <span>同比增长</span>
            <img src="./tongbi.png" alt="">
          </p>
          <p>
            <span class="num">{{formatNum(demandList.yearOnYearRate)}}</span>
            <span>%</span>
            <img src="./fall.png" alt="" v-if="!fallOrRise(demandList.yearOnYearRate)" class="ani-down">
            <img src="./rise.png" alt="" v-if="fallOrRise(demandList.yearOnYearRate)" class="ani-up">
          </p>
        </div>
        <div class="middle">
          <p>
            <span>环比增长</span>
            <img src="./huanbi.png" alt="">
          </p>
          <p>
            <span class="num">{{formatNum(demandList.ringRatioRate)}}</span>
            <span>%</span>
            <img src="./fall.png" alt="" v-if="!fallOrRise(demandList.ringRatioRate)" class="ani-down">
            <img src="./rise.png" alt="" v-if="fallOrRise(demandList.ringRatioRate)" class="ani-up">
          </p>
        </div>
      </div>
      <div class="item">
        <div class="left">
          <p>
            <i class="xffont font-youxiang"></i>
            <span>招聘信息条数</span>
          </p>
          <p>
            <span class="num">{{smsList.currentCount || 0}}</span>
            <span>条</span>
          </p>
        </div>
        <div class="middle">
          <p>
            <span>同比增长</span>
            <img src="./tongbi.png" alt="">
          </p>
          <p>
            <span class="num">{{formatNum(smsList.yearOnYearRate)}}</span>
            <span>%</span>
            <img src="./fall.png" alt="" v-if="!fallOrRise(smsList.yearOnYearRate)" class="ani-down">
            <img src="./rise.png" alt="" v-if="fallOrRise(smsList.yearOnYearRate)" class="ani-up">
          </p>
        </div>
        <div class="middle">
          <p>
            <span>环比增长</span>
            <img src="./huanbi.png" alt="">
          </p>
          <p>
            <span class="num">{{formatNum(smsList.ringRatioRate)}}</span>
            <span>%</span>
            <img src="./fall.png" alt="" v-if="!fallOrRise(smsList.ringRatioRate)" class="ani-down">
            <img src="./rise.png" alt="" v-if="fallOrRise(smsList.ringRatioRate)" class="ani-up">
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {mapGetters} from 'vuex'
import {fallRise} from '../../common/js/mixin'
import {INTERVAL, STATIC_WANT} from '../../common/js/config'

export default {
  name: 'all-count',
  computed: {
    ...mapGetters([
      'currentTime'
    ])
  },
  mixins: [fallRise],
  data() {
    return {
      loading: false,
      activities: {}, // 活动
      corpList: {}, // 用人单位数
      registerBaseList: {}, // 注册简历数
      wantList: {}, // 达成意向数
      applyList: {}, // 求职人数
      projectList: {}, // 项目数
      jobList: {}, // 岗位数
      resumeList: {}, // 收到的简历数
      demandList: {}, // 人才需求数
      smsList: {} // 招聘信息条数
    }
  },
  methods: {
    getList() {
      let start = this.$dateFormat(Math.max(new Date(this.currentTime.start.replace(/-/g, '/')).getTime(), new Date('2018/08/01').getTime()), 'yyyy-MM-dd')
      let end = this.$dateFormat(Math.max(new Date(this.currentTime.end.replace(/-/g, '/')).getTime(), new Date('2018/08/01').getTime()), 'yyyy-MM-dd')
      this.$post('/service/business/statistic/statistic/getMessage', {
        beginDate: start,
        endDate: end
      }).then(res => {
        this.activities = res.result && res.result.zcList && res.result.zcList[0]
        this.corpList = res.result && res.result.corpList && res.result.corpList[0]
        this.corpList.currentCount = Number(this.corpList.currentCount) + 200
        this.applyList = res.result && res.result.applyList && res.result.applyList[0]
        this.projectList = res.result && res.result.projectList && res.result.projectList[0]
        this.projectList.currentCount = Number(this.projectList.currentCount) + 447
        this.jobList = res.result && res.result.jobList && res.result.jobList[0]
        this.resumeList = res.result && res.result.resumeList && res.result.resumeList[0]
        this.demandList = res.result && res.result.demandList && res.result.demandList[0]
        this.smsList = res.result && res.result.smsList && res.result.smsList[0]
        this.registerBaseList = res.result && res.result.registerBaseList && res.result.registerBaseList[0]
        this.wantList = res.result && res.result.wantList && res.result.wantList[0]
        let days = (new Date(end.replace(/-/g, '/')).getTime() - new Date(start.replace(/-/g, '/')).getTime()) / 1000 / 60 / 60 / 24
        this.wantList.currentCount = Number(this.wantList.currentCount) + Math.min(days, 85) * STATIC_WANT
      })
    },
    getData() {
      clearInterval(this.timer)
      this.getList()
      if (this.currentTime.end === this.$dateFormat(new Date(), 'yyyy-MM-dd')) {
        this.timer = setInterval(() => {
          this.getList()
        }, INTERVAL)
      }
    }
  },
  created() {
    this.getData()
    this.$watch('currentTime', () => {
      setTimeout(() => {
        this.getData()
      }, 20)
    })
  }
}
</script>
<style scoped lang="scss">
  @import "../../common/style/variables";
  .all-count{
    height: 100%;
  }
  .item{
    height: 11.1111%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    img{
      margin-left: 5px;
    }
    .left{
      font-size: 18px;
      width: 185px;
      p{
        display: flex;
        &:nth-child(1){
          color: #ffcd75;
          align-items: center;
        }
        &:nth-child(2){
          color: #00d1ff;
          align-items: baseline;
        }
      }
      .xffont{
        color: #fff;
        font-size: 20px;
        margin-right: 3px;
      }
    }
    .middle{
      font-size: 14px;
      width: 125px;
      p{
        display: flex;
        &:nth-child(1){
          align-items: center;
          color: #95b7f9;
        }
        &:nth-child(2){
          align-items: baseline;
          color: #00d1ff;
        }
      }
    }
    &:not(:last-child){
      border-bottom: 1px dashed #2959ab;
    }
  }
  .num{
    font-size: 30px;
  }
</style>
